<style lang="scss" scoped>
  .page-bottom {
    z-index: 100;
    position: fixed;
    width: 7.5rem;
    height: 0.98rem;
    bottom: 0;
    left: 0;
    background-color: #ffffff;
    box-shadow: -0.17rem 0rem 0.49rem 0rem rgba(109, 138, 255, 0.1);
    display: flex;
    text-align: center;
    align-items:center;
    font-size: 0.24rem;
    color: #999999;
    .text{
      padding-top: 0.06rem;
    }
    
    .icon-box{
      flex: 1;
    }
    img {
      width: 0.48rem;
      height: 0.48rem;
      display: block;
      margin: 0 auto;
    }
    .chosed{
      color: #4985f4;
    }
  }
  .header-stance{
    height: 1rem;
  }
</style>
<template>
  <div class="bottom-box">
    <div class="page-bottom">
      <div class="icon-box" @click="go(item.url,index)" v-for="(item, index) in iconData" :class="[active == index ?'chosed':'']">
        <img :src="item.icon">
        <div class="text">{{item.text}}</div>
      </div>
    </div>
    <div class="header-stance"></div>
  </div>
</template>
<script>
// import msvideo from '@/components/video/video'
export default {
  components: {

  },

  data() {
    return {
      iconData:[
        {
          icon: '/static/images/forjs/news.png',
          text: '消息',
          url: '/news/',
        },
        {
          icon: '/static/images/forjs/main.png',
          text: '业务',
          url: '/main/',
        },
        {
          icon: '/static/images/forjs/mine.png',
          text: '我的',
          url: '/mine/',
        },
      ],
      active: 1,
    }
  },

  created() {

  },

  mounted() {
    this.changeRouter()
  },

  computed: {

  },

  methods: {
    go(url,index) {
      if (this.active == index) {
        return
      }
      this.$router.push(url)
    },
    changeRouter() {
        var path=this.$route.path;   
        if (path.indexOf('/news') == 0) {
          this.active = 0;
        }
        else if (path.indexOf('/main') == 0) {
          this.active = 1;
        }  
        else if (path.indexOf('/mine') == 0) {
          this.active = 2;
        }
        else{
          this.active = 1;
        }
        this.setIconDefault()
        if (this.active == 0) {
          this.iconData[0].icon = '/static/images/forjs/news-click.png'
        }else if(this.active == 1){
          this.iconData[1].icon ='/static/images/forjs/main-click.png'
        }else if(this.active == 2){
          this.iconData[2].icon ='/static/images/forjs/mine-click.png'
        }
    },
    setIconDefault (){
        this.iconData[0].icon = '/static/images/forjs/news.png'
        this.iconData[1].icon ='/static/images/forjs/main.png'
        this.iconData[2].icon ='/static/images/forjs/mine.png'
    },
  },
  watch:{
      $route(){
          // alert('msg');
          this.changeRouter()
      },
      // active(){
          
      // },
  }
}

</script>
